<template>
  <div class="home-body">
      <el-card class="box-card">
        <div  class="text item">
          1) 下午好，尊敬的用户 {{userAccount}} 
        </div>

        <div  class="text item">
          2) 现在时间是 {{date}}
        </div>

        <div  class="text item">
          3) 停车场目前车位富裕，可以放心驶入停车
        </div>

        <div  class="text item">
          4) 今天的天气晴朗，未来两小时内不会下雨，放心出门吧！
        </div>
      </el-card>

      <div class="body-recharge">
        <span>最近七天内的充值情况</span>
        <div style="width: 100%; height: 100%;" ref="chart_recharge"></div>
      </div>

      <div class="body-refund">
        <span>最近七天内的消费情况</span>
        <div style="width: 100%; height: 100%;" ref="chart_refund"></div>
      </div>

      <div class="body-plate">
        <span>最近七天内的车牌使用情况</span>
        <div style="width: 100%; height: 100%;" ref="chart_plate"></div>
      </div>
  </div>
</template>

<script>
let Echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar'); 

export default {
  data(){
    return{
      userAccount :'',

      date:'',

      chart: null,
    }
  },

  mounted() { 
    this.init_recharge()
    this.init_refund()
    this.init_plate()
  },

  methods:{
    init_recharge() {
      this.chart = Echarts.init(this.$refs.chart_recharge);
      let option = {
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, 
        yAxis: { type: 'value' }, //Y轴
        series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }]
                    };
        this.chart.setOption(option);
      },

    init_refund() {
      this.chart = Echarts.init(this.$refs.chart_refund);
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [90, 160, 180, 40, 140, 40, 210],
            type: 'line'
          }
      ]}
      this.chart.setOption(option);
    },

    init_plate() {
      this.chart = Echarts.init(this.$refs.chart_plate);
      let option = {
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 335,
                name: '豫L27272'
              },
              {
                value: 234,
                name: '豫L28282'
              },
              {
                value: 1548,
                name: '豫L29292'
              }
            ]
          }
        ]
      };
      this.chart.setOption(option);
    },
    },

    created:function() {
      this.userAccount = window.sessionStorage.getItem('userAccount')

      const d = new Date()
      console.log(d.getDate);
      this.date = ``+d.getFullYear() +`-`+(d.getMonth()+1)+`-`+d.getDate()+` `+d.getHours()+`:`+d.getMinutes()+``
    },
}
</script>

<style>
.home-body{
  height: 90%;
  width: 100%;
}

.box-card{
  width: 40%;
  height: 40%;

  opacity: 0.8;

  margin-top: 25px;
}

.text {
    font-size: 18px;
  }

.item {
  padding: 18px 0;
}

.body-recharge{
  width: 40%;
  height: 49%;

  background-color: white;
  opacity: 0.8;

  margin-top: 60px;
  text-align: center;
  border-radius:5px;
  font-size: 20px;
}

.body-refund{
  width: 40%;
  height: 44.2%;

  background-color: white;
  opacity: 0.8;

  margin-top: 60px;
  text-align: center;
  border-radius:5px;

  position: absolute;
  font-size: 20px;

  top: 364px;
  right: 150px;
}

.body-plate{
  width: 40%;
  height: 338px;

  background-color: white;
  opacity: 0.8;

  margin-top: 60px;
  text-align: center;
  border-radius:5px;

  position: absolute;
  font-size: 20px;

  top: -34px;
  right: 150px;
}
</style>